import type { Rule } from '@unocss/core';
import type { Theme } from '@unocss/preset-uno';

function enterRule() {
  const maxChild = 5;
  const rules: Rule<Theme>[] = [
    [
      /^enter-x$/,
      function* r(_, { symbols }) {
        for (let i = 1; i <= maxChild; i += 1) {
          const baseDelay = 0.1;
          const delay = `${baseDelay * i}s`;
          yield {
            [symbols.selector]: selector => `${selector}:nth-child(${i})`,
            animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
            opacity: '0',
            transform: `translateX(50px)`
          };
        }
      }
    ],
    [
      /^enter-y$/,
      function* r(_, { symbols }) {
        for (let i = 1; i <= maxChild; i += 1) {
          const baseDelay = 0.1;
          const delay = `${baseDelay * i}s`;
          yield {
            [symbols.selector]: selector => `${selector}:nth-child(${i})`,
            animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
            opacity: '0',
            transform: `translateY(50px)`
          };
        }
      }
    ],
    [
      /^enter-x-r$/,
      function* r(_, { symbols }) {
        for (let i = 1; i <= maxChild; i += 1) {
          const baseDelay = 0.1;
          const delay = `${baseDelay * i}s`;
          yield {
            [symbols.selector]: selector => `${selector}:nth-child(${i})`,
            animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
            opacity: '0',
            transform: `translateX(-50px)`
          };
        }
      }
    ],
    [
      /^enter-y-r$/,
      function* r(_, { symbols }) {
        for (let i = 1; i <= maxChild; i += 1) {
          const baseDelay = 0.1;
          const delay = `${baseDelay * i}s`;
          yield {
            [symbols.selector]: selector => `${selector}:nth-child(${i})`,
            animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
            opacity: '0',
            transform: `translateY(-50px)`
          };
        }
      }
    ]
  ];
  return rules;
}

export const rules = [...enterRule()];

export default rules;
